<template>
	<z-nav-bar transparentTitle="auto">
		<!-- #ifdef MP-WEIXIN -->
		<template #left>
			<navigator open-type="switchTab" url="/pages/tabbar-page/tabbar-0" hover-class="none">
				<image :src="`${setting.oss_pub_domain}/app-img/icon/icon_return.png`" class="icon-size"></image>
			</navigator>
		</template>
		<!-- #endif -->
	</z-nav-bar>
	<view :class="[goldUserInfo.type == 2 && setting.activity_gold_medal_open == 0 ? 'end-header-box' : 'header-box']">
		<view v-if="goldUserInfo.type == 2 && setting.activity_gold_medal_open == 0">
			<image :src="goldUserInfo.avatar" class="head" mode="aspectFill"></image>
			<view class="text-c z-font-32 uni-white uni-mt-24">{{ goldUserInfo.userName }}</view>
			<view class="share-title-bg">中国高尔夫金牌教练</view>
			<view class="flex_cc uni-mt-100">
				<view class="upload-button uni-mr-48" @click="saveShar(1)">分享好友</view>
				<view class="upload-button" @click="saveShar(0)">保存海报</view>
			</view>
		</view>
	</view>

	<view
		class="content-box"
		:class="{ 'bg-filter': !popupStatus }"
		:style="{ top: setting.activity_gold_medal_open == 0 && goldUserInfo.type == 2 ? '1090rpx' : '456rpx' }"
	>
		<view v-if="goldUserInfo.type == 1 && setting.activity_gold_medal_open == 1" class="judge-box flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/judgeship.png'"></image>
			<view class="text-w uni-ml-20">{{ goldUserInfo.userName }}</view>
			<view class="uni-color-grey uni-ml-16">(评委身份)</view>
			<view class="uni-color-main uni-ml-16">已通过</view>
		</view>
		<view :class="[setting.activity_gold_medal_open == 1 ? 'start' : 'end', 'content']">
			<view v-if="goldUserInfo.type == 2 && goldUserInfo.videoUrl && setting.activity_gold_medal_open == 1">
				<view class="flex_fsc">
					<view class="line"></view>
					<view class="flex_sbc width-100">
						<view class="title-style">
							我的参赛作品
							<span style="font-weight: 400">（{{ goldUserInfo.userName }}）</span>
						</view>
						<view
							v-if="
								goldUserInfo.type == 2 &&
								(!goldUserInfo.videoUrl || goldUserInfo.status == 3) &&
								setting.activity_gold_medal_open == 1
							"
							class="upload-button"
							@click="uploadVideofile.open()"
						>
							{{ goldUserInfo.status == 3 ? '重新' : '' }}上传作品
						</view>
						<view class="z-font-32" :style="{ color: reviewStatus[goldUserInfo.status || 0].color }">
							{{ reviewStatus[goldUserInfo.status || 0].text
							}}{{ goldUserInfo.status === 2 ? `(${goldUserInfo.passNumber})` : '' }}
						</view>
					</view>
				</view>
				<view v-html="videoHtml" class="video-class"></view>
			</view>
			<view v-if="works">
				<view v-if="goldUserInfo.type == 2 && goldUserInfo.videoUrl" class="flex_sbc uni-mt-16 uni-mb-60">
					<view class="z-font-32 z-font-24">分享获赞参与热度评选</view>
					<view class="flex_cc share-button">
						<image
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/icon_share.png'"
							class="icon-size-32 uni-mr-8"
						></image>
						<view @click="share">立即分享</view>
					</view>
				</view>
			</view>
			<view v-if="!works && setting.activity_gold_medal_open == 1">
				<view class="flex_sbc width-100">
					<view class="flex_fsc">
						<view class="line"></view>
						<view class="title-style">评选内容</view>
					</view>
					<view class="flex_fsc">
						<view
							v-if="
								goldUserInfo.type == 2 &&
								(!goldUserInfo.videoUrl || goldUserInfo.status == 3) &&
								setting.activity_gold_medal_open == 1
							"
							class="upload-button uni-mr-32"
							@click="uploadVideofile.open()"
						>
							{{ goldUserInfo.status == 3 ? '重新' : '' }}上传作品
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share">
							<view class="upload-button" style="margin: 0">分享好友</view>
						</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view class="upload-button" @click="saveSharNormal(that)">分享好友</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="item-box">
					<view class="flex_sbc">
						<view class="flex_fsc">
							<image
								:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/trophy.png'"
								class="icon-size-32"
							></image>
							<view class="uni-white uni-ml-20">大赛介绍</view>
						</view>
						<view class="button" @click="works = 1">参赛作品</view>
					</view>

					<view class="flex_fs uni-mt-60">
						<image
							class="right-icon"
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/right.png'"
						></image>
						<text class="content-text">{{setting.activity_dsjs_remark}}</text>
					</view>
				</view>
				<view class="item-box">
					<view class="flex_fsc uni-mt-4">
						<image
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/file.png'"
							class="icon-size-32"
						></image>
						<view class="uni-white uni-ml-20">评选规则</view>
					</view>

					<view class="flex_fs uni-mt-60">
						<image
							class="right-icon"
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/right.png'"
						></image>
						<text class="content-text">{{setting.activity_pxgz_remark}}</text>
					</view>
				</view>
			</view>
			<view v-if="setting.activity_gold_medal_open == 0">
				<view class="upload-button uni-mb-32" @click="saveSharNormal(that)">分享好友</view>
				<result></result>
			</view>
			<entry v-if="works && setting.activity_gold_medal_open == 1" @popupStatus="(e) => (popupStatus = e)"></entry>
			<view class="history">
				<view style="height: 48rpx"></view>
				<view class="title title-style">往期展示</view>
				<view>
					<image
						class="uni-mt-40 history-img"
						:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/history1.png'"
						mode="widthFix"
					></image>
					<image
						class="uni-mt-24 history-img"
						:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/history2.png'"
						mode="widthFix"
					></image>
					<image
						class="uni-mt-24 history-img"
						:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/history3.png'"
						mode="widthFix"
					></image>
				</view>
			</view>
		</view>
	</view>
	<upload-video ref="uploadVideofile" @done="uploadSucess"></upload-video>
</template>

<script setup>
import { ref, getCurrentInstance, provide, computed } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { getUserInfo, getPoster } from '../../api/gold-medal-coach';
import UploadVideo from './upload-video';
import Entry from './entry';
import Result from './result';
import { saveSharNormal, introText, ruleText } from './config';

const { proxy: that } = getCurrentInstance(),
	popupStatus = ref(0);
// that.setting.activity_gold_medal_open = 0
const goldUserInfo = ref({}),
	reviewStatus = [
		{
			color: '#999999',
			text: '未上传'
		},
		{
			color: '#FF7742',
			text: '评审中'
		},
		{
			color: '#008965',
			text: '通过'
		},
		{
			color: '#E23A3A',
			text: '未通过'
		}
	];

// #ifndef MP-WEIXIN
const token = uni.getStorageSync('token');
if (token)
	getUserInfo().then((res) => {
		// res.status = 3
		if (res && res.videoUrl) videoHtml.value = setVideoHtml(res.videoUrl);
		if (res) goldUserInfo.value = res;
	});
// #endif

provide(
	'goldUserInfo',
	computed(() => goldUserInfo.value)
);

const works = ref(0);
onLoad((opt) => {
	works.value = parseInt(opt.works || 0);
});
const uploadVideofile = ref('');
function uploadSucess(e) {
	goldUserInfo.value.videoUrl = e;
	videoHtml.value = setVideoHtml(e);
}

const videoHtml = ref('');
function setVideoHtml(src) {
	return `<video controlslist="nodownload"	controls="controls"   src="${
		that.setting.oss_pub_domain + src
	}"   style="height:100%;width: 100%;background: #333"  poster="${`${that.setting.oss_pub_domain}${src}?x-oss-process=video/snapshot,t_1000,ar_auto`}" webkit-playsinline="" playsinline="" ></video>`;
}

/**
 * 教练分享或保存海报
 * @param {Number} type 0 保存 1 分享
 */
function saveShar(type) {
	getPoster({ phones: goldUserInfo.value.phones }).then((res) => {
		if (type)
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 2,
				imageUrl: res,
				success: (res) => {
					that.tools.alert('分享成功');
				}
			});
		else
			uni.downloadFile({
				url: res,
				success: (tmp) => {
					uni.saveImageToPhotosAlbum({
						filePath: tmp.tempFilePath,
						success: () => {
							that.tools.alert('保存成功');
						}
					});
				}
			});
	});
}

// #ifdef MP-WEIXIN
onShareAppMessage((res) => {
	return {
		title: '中国高尔夫金牌教练评选'
	};
});
// #endif

function share() {
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 5,
		imageUrl:
			that.setting.oss_pub_domain + goldUserInfo.value.videoUrl + '?x-oss-process=video/snapshot,t_1000,ar_auto',
		title: '中国高尔夫金牌教练评选作品\n选手姓名：' + goldUserInfo.value.userName,
		miniProgram: {
			id: 'gh_6be15b82eac6',
			path: 'pages/gold-medal-coach/index',
			webUrl: 'http://uniapp.dcloud.io'
		},
		success: (ret) => {
			that.tools.alert('分享成功');
		}
	});
}
</script>

<style lang="scss" scoped>
@import './index.scss';
::v-deep button {
	margin: 0 !important;
	padding: 0 !important;
	width: 160rpx !important;
	height: 56rpx !important;
	background: transparent !important;
	border: none !important;
}
::v-deep button::after {
	border: none !important;
}
</style>
`
